<template>
  <div id="app">
    <!-- <Echarts :size="size" :options="options"/> -->
    <div class="header">
      <h1>大数据可视化</h1>
      <div class="showTime">当前时间：2021年6月10日-12时47分01秒</div>
    </div>
    <div class="echarts">
      <div class="left">
        <Bar />
        <ELine />
        <EPie />
      </div>
      <div class="mid">
        <h1 class="title" style="font-family:electronicFont;">
          <span>新冠确诊人数: 125811</span> 
          <span>|</span>
          <span>新冠疑似人数: 125811</span>
        </h1>
        <Map />
      </div>
      <div class="right">
        <BarV />
        <ELineRight />
        <EPieRight />
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from './components/Echarts.vue'
import Bar from './components/Bar.vue'
import BarV from './components/BarV.vue'
import ELine from './components/ELine.vue'
import ELineRight from './components/ELineRight.vue'
import EPie from './components/EPie.vue'
import EPieRight from './components/EPieRight.vue'
import Map from './components/Map.vue'


export default {
  name: 'App',
  components: {
    Echarts,
    Bar,
    ELine,
    EPie,
    BarV,
    ELineRight,
    EPieRight,
    Map
  },
  data () {
    return {
      options: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      },
      size: {
        width: '1000px',
        height: '400px'
      }
    }
  },
}
</script>

<style>
/* 自定义字体 */
@font-face {
  font-family: electronicFont;
  src: url(./assets/DS-DIGIT.TTF);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 实现响应式 */
html {
  /* 将屏幕设置为24rem */
  /* 宽高比例 16:9 */
  font-size: calc(100vw / 24);
  color: #fff;
}
body {
  font-size: 12px;
  width: 100vw;
  height: calc(100vw / 16 * 9);
  background-image: url(assets/bg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* overflow: hidden; */
}
.header {
  text-align: center;
  position: relative;
  height: 1.25rem;
  line-height: 1.25rem;
  background-image: url(assets/head_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.header h1 {
  font-size: 0.6rem;
}
.header .showTime {
  height: 0.5rem;
  line-height: 0.5rem;
  margin-top: -0.25rem;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  font-size: 0.3rem;
}
#app {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#app .echarts {
  flex: 1;
  width: 100vw;
  padding: 0.15rem;
  display: flex;
}
.echarts .left {
  flex: 3;
}
.echarts .mid {
  flex: 5;
}
.echarts .right {
  flex: 3;
}
.title {
  padding: 40px 140px;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
}
</style>
